<template>
  <div>
    {{ data.count }}
    <br />
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue'
export default {
  setup() {
    const data = reactive({
      count: 1,
    })

    const name = ref('code')

    const increment = () => {
      data.count += 1
      name.value = 'fly'
    }

    watch(
      () => data.count,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      }
    )

    watch(name, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })

    return {
      data,
      increment,
    }
  },
}
</script>

<style
  lang="scss"
  scoped
></style>
